<template>
    <div class="content-index-bd">
        <div class="data-wrap clearfix">
            <div class="tb-wrap">
                <a-form>
                    <div class="warehouse">
                        <span class="wh-title">选择仓库</span>
                        <div class="modal-container">
                            <a-select style="min-width: 200px" placeholder="全部仓库">
                                <a-select-option value="localhost">本地</a-select-option>
                            </a-select>
                        </div>
                    </div>
                    <div class="lm-header-wrap">
                        <div class="lm-title">选择成品</div>
                        <div class="lm-title-detail">
                            <a-icon type="info-circle" theme="filled"
                                    style="margin-right: 6px; color: rgb(0, 102, 221);font-size: 16px"/>
                            最多可选择20个成品
                        </div>
                        <a-button icon="search" class="lm-btn">查询</a-button>
                    </div>
                    <a-table bordered :dataSource="dataSource" :columns="columns" :pagination="false" :bordered="false">
                        <template slot="age" slot-scope="text, record">
                            <a-input-number :min="1" :max="999"></a-input-number>
                        </template>
                    </a-table>
                    <div class="lm-header-wrap">
                        <div class="lm-title">配件</div>
                        <a-button icon="shopping-cart" class="lm-btn">采购</a-button>
                    </div>
                    <a-table :rowSelection="rowSelection" :columns="TableOnecolumns" :dataSource="TableOnedata"
                             :pagination="false">
                        <a slot="number" slot-scope="text" href="javascript:;">{{text}}</a>
                    </a-table>
                </a-form>
            </div>
        </div>
    </div>
</template>

<script>
    const TableOnecolumns = [
        {
            title: '序号',
            dataIndex: 'number',
            width: 80,
            scopedSlots: {customRender: 'number'},
        },
        {
            title: '物品编号',
            dataIndex: 'itemNumber',
        },
        {
            title: '物品名称',
            dataIndex: 'itemName',
        },
        {
            title: '规格型号',
            dataIndex: 'model',
        },
        {
            title: '品牌',
            dataIndex: 'brand',
        },
        {
            title: '制造商型号',
            dataIndex: 'itemName',
        },
        {
            title: '制造商型号',
            dataIndex: 'itemNmanufacturerame',
        },
        {
            title: '单位',
            dataIndex: 'unit',
        },
        {
            title: '库存数量',
            dataIndex: 'Inventory ',
        },
        {
            title: '需求总数',
            dataIndex: 'total',
        }, {
            title: '缺料总数',
            dataIndex: 'totaldesc',
        },
    ];

    const TableOnedata = [
        {
            key: '1',
        },

    ];

    const dataSource = [{key: '1'},];

    const columns= [
        {
            title: '序号',
            dataIndex: 'key',
        },
        {
            title: '物品编号',
            dataIndex: 'name',
            width: '150',

        },
        {
            title: '物品名称',
            dataIndex: 'birthday',
            width: '150',

        },
        {
            title: '规格型号',
            dataIndex: 'month',
            width: '150',

        },
        {
            title: '品牌',
            dataIndex: 'country',
            width: '150',

        },
        {
            title: '制造商型号',
            dataIndex: 'hasCar',
            width: '150',

        },
        {
            title: '单位',
            dataIndex: 'address',
            width: '150',

        },
        {
            title: '组数',
            dataIndex: 'age',
            width: '150',
            scopedSlots: { customRender: 'age' },
        },

        // {
        //     title: 'operation',
        //     dataIndex: 'operation',
        //     width: '150',
        // }
    ];
    export default {
        name: "lackMaterialBody",
        methods: {},
        data() {
            return {
                TableOnedata,
                TableOnecolumns,
                dataSource,
                columns
            };
        },
        computed: {
            rowSelection() {
                const {selectedRowKeys} = this;
                return {
                    onChange: (selectedRowKeys, selectedRows) => {
                        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
                    },
                    getCheckboxProps: record => ({
                        props: {
                            disabled: record.name === 'Disabled User', // Column configuration not to be checked
                            name: record.name,
                        },
                    }),
                };
            },
        },
    }
</script>

<style lang="stylus" scoped>
    .content-index-bd {
        padding: 16px 10px 10px 16px;
    }

    .tb-wrap {
        float: left;
        width: 100%;
        transition: .2s;
        padding-bottom: 64px;
    }

    .warehouse {
        margin-top: 30px;
    }

    .warehouse .wh-title {
        width: 65px;
        height: 13px;
        font-size: 13px;
        color: #222;
        line-height: 13px;
        display: inline-block;
    }

    .modal-container {
        display: inline-block;
    }

    .lm-header-wrap {
        width: 100%;
        height: 32px;
        position: relative;
        font-size: 13px;
        margin: 30px 0 21px;
    }

    .lm-header-wrap .lm-title {
        line-height: 13px;
        margin: 10px 0 9px;
        padding: 0 30px 0 10px;
        font-weight: 700;
        float: left;
        border-left: 3px solid #2da66a;
    }

    .lm-header-wrap .lm-title-detail {
        float: left;
        color: #222;
        margin: 9px 0 10px;
        font-weight: 500;
    }

    .lm-header-wrap .lm-btn {
        position: absolute;
        top: 50%;
        right: 0;
        margin-top: -16px;
        color: #fff;
        background-color: #2b9262;
        border-color: #2b9262;
    }

    .ant-btn > .anticon + span, .ant-btn > span + .anticon {
        margin-left: 8px;
    }
</style>